<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>EasyShare - 多平台视频发布工具</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="wrapper">
        <!-- 侧边栏导航 -->
        <nav id="sidebar" class="active">
            <div class="sidebar-header">
                <h3>EasyShare</h3>
                <img src="logo-placeholder.png" alt="Logo" class="logo">
            </div>

            <ul class="list-unstyled components">
                <li class="active">
                    <a href="#homeSubmenu" data-bs-toggle="collapse" aria-expanded="false" class="dropdown-toggle">
                        <i class="bi bi-house-door"></i> 主页
                    </a>
                    <ul class="collapse list-unstyled" id="homeSubmenu">
                        <li>
                            <a href="#">仪表盘</a>
                        </li>
                        <li>
                            <a href="#">数据统计</a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="#publishModeMenu" data-bs-toggle="collapse" aria-expanded="false" class="dropdown-toggle">
                        <i class="bi bi-camera-video"></i> 发布模式
                    </a>
                    <ul class="collapse list-unstyled" id="publishModeMenu">
                        <li>
                            <a href="#" id="autoModeBtn">自动生成视频发布</a>
                        </li>
                        <li>
                            <a href="#" id="manualModeBtn" class="active">手动生成视频发布</a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="#hotspotMenu" data-bs-toggle="collapse" aria-expanded="false" class="dropdown-toggle">
                        <i class="bi bi-fire"></i> 热点分析
                    </a>
                    <ul class="collapse list-unstyled" id="hotspotMenu">
                        <li>
                            <a href="#" id="hotspotAnalysisBtn">热点分析</a>
                        </li>
                        <li>
                            <a href="#" id="hotspotHistoryBtn">历史记录</a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="#settingsMenu" data-bs-toggle="collapse" aria-expanded="false" class="dropdown-toggle">
                        <i class="bi bi-gear"></i> 设置
                    </a>
                    <ul class="collapse list-unstyled" id="settingsMenu">
                        <li>
                            <a href="#" id="shortcutSettingsBtn">快捷键设置</a>
                        </li>
                        <li>
                            <a href="#" id="systemSettingsBtn">系统设置</a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="#" id="logsBtn">
                        <i class="bi bi-journal-text"></i> 日志记录
                    </a>
                </li>
            </ul>
        </nav>

        <!-- 页面内容 -->
        <div id="content">
            <nav class="navbar navbar-expand-lg navbar-light bg-light">
                <div class="container-fluid">
                    <button type="button" id="sidebarCollapse" class="btn btn-info">
                        <i class="bi bi-list"></i>
                    </button>
                    <div class="ms-auto d-flex align-items-center">
                        <div class="notification-icon me-3">
                            <i class="bi bi-bell"></i>
                            <span class="badge bg-danger">3</span>
                        </div>
                        <div class="user-info">
                            <img src="user-placeholder.png" alt="User" class="user-avatar">
                            <span>用户名</span>
                        </div>
                    </div>
                </div>
            </nav>

            <!-- 主要内容区域 -->
            <div class="container-fluid main-content">
                <!-- 手动生成视频发布模式 -->
                <div id="manualModeContent" class="content-section active">
                    <div class="row mb-4">
                        <div class="col-12">
                            <div class="card">
                                <div class="card-header d-flex justify-content-between align-items-center">
                                    <h5 class="mb-0">手动生成视频发布</h5>
                                    <button class="btn btn-primary" id="recordVideoBtn">
                                        <i class="bi bi-record-circle"></i> 录制视频
                                    </button>
                                </div>
                                <div class="card-body">
                                    <div class="video-directory-section mb-4">
                                        <div class="d-flex justify-content-between align-items-center mb-3">
                                            <h6>视频目录</h6>
                                            <div>
                                                <button class="btn btn-sm btn-outline-secondary me-2">
                                                    <i class="bi bi-folder"></i> 更改目录
                                                </button>
                                                <button class="btn btn-sm btn-outline-secondary">
                                                    <i class="bi bi-arrow-clockwise"></i> 刷新
                                                </button>
                                            </div>
                                        </div>
                                        <div class="directory-path p-2 bg-light rounded">
                                            <i class="bi bi-folder2-open"></i> D:\Videos\EasyShare
                                        </div>
                                    </div>

                                    <div class="video-files-section">
                                        <div class="d-flex justify-content-between align-items-center mb-3">
                                            <h6>视频文件</h6>
                                            <div class="btn-group">
                                                <button class="btn btn-sm btn-outline-secondary">
                                                    <i class="bi bi-sort-down"></i> 按时间排序
                                                </button>
                                                <button class="btn btn-sm btn-outline-secondary">
                                                    <i class="bi bi-grid"></i> 网格视图
                                                </button>
                                                <button class="btn btn-sm btn-outline-secondary">
                                                    <i class="bi bi-list"></i> 列表视图
                                                </button>
                                            </div>
                                        </div>

                                        <div class="video-list">
                                            <table class="table table-hover">
                                                <thead>
                                                    <tr>
                                                        <th width="5%"><input type="checkbox" class="form-check-input" id="selectAllVideos"></th>
                                                        <th width="15%">缩略图</th>
                                                        <th width="30%">文件名</th>
                                                        <th width="15%">创建时间</th>
                                                        <th width="15%">时长</th>
                                                        <th width="20%">操作</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <tr>
                                                        <td><input type="checkbox" class="form-check-input video-select"></td>
                                                        <td><img src="video-thumbnail-1.jpg" alt="视频缩略图" class="video-thumbnail"></td>
                                                        <td>
                                                            <div class="video-name">如何提高工作效率.mp4</div>
                                                            <div class="video-theme">主题: 职场技巧</div>
                                                        </td>
                                                        <td>2023-06-15 14:30</td>
                                                        <td>03:45</td>
                                                        <td>
                                                            <button class="btn btn-sm btn-outline-primary me-1"><i class="bi bi-play"></i></button>
                                                            <button class="btn btn-sm btn-outline-secondary me-1"><i class="bi bi-pencil"></i></button>
                                                            <button class="btn btn-sm btn-outline-danger"><i class="bi bi-trash"></i></button>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td><input type="checkbox" class="form-check-input video-select"></td>
                                                        <td><img src="video-thumbnail-2.jpg" alt="视频缩略图" class="video-thumbnail"></td>
                                                        <td>
                                                            <div class="video-name">夏日美食分享.mp4</div>
                                                            <div class="video-theme">主题: 美食</div>
                                                        </td>
                                                        <td>2023-06-14 10:15</td>
                                                        <td>05:20</td>
                                                        <td>
                                                            <button class="btn btn-sm btn-outline-primary me-1"><i class="bi bi-play"></i></button>
                                                            <button class="btn btn-sm btn-outline-secondary me-1"><i class="bi bi-pencil"></i></button>
                                                            <button class="btn btn-sm btn-outline-danger"><i class="bi bi-trash"></i></button>
                                                        </td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row mb-4">
                        <div class="col-12">
                            <div class="card">
                                <div class="card-header">
                                    <h5 class="mb-0">发布设置</h5>
                                </div>
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="platform-selection mb-4">
                                                <h6 class="mb-3">选择发布平台</h6>
                                                <div class="form-check mb-2">
                                                    <input class="form-check-input" type="checkbox" id="douyin" checked>
                                                    <label class="form-check-label" for="douyin">
                                                        <i class="bi bi-music-note-beamed"></i> 抖音
                                                    </label>
                                                </div>
                                                <div class="form-check mb-2">
                                                    <input class="form-check-input" type="checkbox" id="bilibili" checked>
                                                    <label class="form-check-label" for="bilibili">
                                                        <i class="bi bi-play-btn"></i> B站
                                                    </label>
                                                </div>
                                                <div class="form-check mb-2">
                                                    <input class="form-check-input" type="checkbox" id="xiaohongshu" checked>
                                                    <label class="form-check-label" for="xiaohongshu">
                                                        <i class="bi bi-book"></i> 小红书
                                                    </label>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="publish-settings">
                                                <h6 class="mb-3">发布选项</h6>
                                                <div class="mb-3">
                                                    <label for="publishTitle" class="form-label">标题</label>
                                                    <input type="text" class="form-control" id="publishTitle" placeholder="输入视频标题">
                                                </div>
                                                <div class="mb-3">
                                                    <label for="publishDescription" class="form-label">描述</label>
                                                    <textarea class="form-control" id="publishDescription" rows="3" placeholder="输入视频描述"></textarea>
                                                </div>
                                                <div class="mb-3">
                                                    <label for="publishTags" class="form-label">标签</label>
                                                    <input type="text" class="form-control" id="publishTags" placeholder="输入标签，用逗号分隔">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="card-footer text-end">
                                    <button class="btn btn-success" id="oneClickPublishBtn">
                                        <i class="bi bi-cloud-upload"></i> 一键发布
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-12">
                            <div class="card">
                                <div class="card-header">
                                    <h5 class="mb-0">发布状态</h5>
                                </div>
                                <div class="card-body">
                                    <div class="publish-status">
                                        <table class="table">
                                            <thead>
                                                <tr>
                                                    <th>平台</th>
                                                    <th>视频</th>
                                                    <th>状态</th>
                                                    <th>进度</th>
                                                    <th>操作</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr>
                                                    <td><i class="bi bi-music-note-beamed"></i> 抖音</td>
                                                    <td>如何提高工作效率.mp4</td>
                                                    <td class="text-warning">上传中</td>
                                                    <td>
                                                        <div class="progress">
                                                            <div class="progress-bar progress-bar-striped progress-bar-animated" 
                                                                role="progressbar" style="width: 45%" 
                                                                aria-valuenow="45" aria-valuemin="0" aria-valuemax="100">45%</div>
                                                        </div>
                                                    </td>
                                                    <td>
                                                        <button class="btn btn-sm btn-outline-secondary me-1"><i class="bi bi-pause"></i></button>
                                                        <button class="btn btn-sm btn-outline-danger"><i class="bi bi-x"></i></button>
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 自动生成视频发布模式 -->
                <div id="autoModeContent" class="content-section">
                    <div class="row mb-4">
                        <div class="col-12">
                            <div class="card">
                                <div class="card-header d-flex justify-content-between align-items-center">
                                    <h5 class="mb-0">自动生成视频发布</h5>
                                    <div id="automationStatus">
                                        状态: <span class="badge bg-info">未开始</span>
                                    </div>
                                </div>
                                <div class="card-body">
                                    <div class="auto-mode-settings mb-4">
                                        <h6 class="mb-3">自动化参数设置</h6>
                                        <div class="row">
                                            <div class="col-md-6">
                                                <div class="mb-3">
                                                    <label for="hotspotKeywords" class="form-label">热点关键词</label>
                                                    <input type="text" class="form-control" id="hotspotKeywords" placeholder="输入关键词，用逗号分隔">
                                                </div>
                                                <div class="mb-3">
                                                    <label for="videoCount" class="form-label">生成视频数量</label>
                                                    <input type="number" class="form-control" id="videoCount" value="3" min="1" max="10">
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="mb-3">
                                                    <label for="videoDuration" class="form-label">视频时长 (秒)</label>
                                                    <input type="number" class="form-control" id="videoDuration" value="60" min="15" max="300">
                                                </div>
                                                <div class="mb-3">
                                                    <label for="publishPlatforms" class="form-label">发布平台</label>
                                                    <div class="form-check">
                                                        <input class="form-check-input" type="checkbox" id="autoDouyin" checked>
                                                        <label class="form-check-label" for="autoDouyin">抖音</label>
                                                    </div>
                                                    <div class="form-check">
                                                        <input class="form-check-input" type="checkbox" id="autoBilibili" checked>
                                                        <label class="form-check-label" for="autoBilibili">B站</label>
                                                    </div>
                                                    <div class="form-check">
                                                        <input class="form-check-input" type="checkbox" id="autoXiaohongshu" checked>
                                                        <label class="form-check-label" for="autoXiaohongshu">小红书</label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="automation-controls mb-4">
                                        <h6 class="mb-3">自动化操作</h6>
                                        <button class="btn btn-success" id="startAutomationBtn">
                                            <i class="bi bi-play"></i> 开始自动化
                                        </button>
                                        <button class="btn btn-warning" id="pauseAutomationBtn">
                                            <i class="bi bi-pause"></i> 暂停自动化
                                        </button>
                                        <button class="btn btn-info" id="resumeAutomationBtn">
                                            <i class="bi bi-arrow-clockwise"></i> 恢复自动化
                                        </button>
                                        <button class="btn btn-danger" id="stopAutomationBtn">
                                            <i class="bi bi-stop"></i> 停止自动化
                                        </button>
                                    </div>

                                    <div class="auto-publish-status">
                                        <h6 class="mb-3">自动发布状态</h6>
                                        <table class="table">
                                            <thead>
                                                <tr>
                                                    <th>任务</th>
                                                    <th>平台</th>
                                                    <th>状态</th>
                                                    <th>进度</th>
                                                    <th>操作</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr>
                                                    <td>热点分析</td>
                                                    <td>全部</td>
                                                    <td class="text-success">已完成</td>
                                                    <td>
                                                        <div class="progress">
                                                            <div class="progress-bar" role="progressbar" style="width: 100%" 
                                                                aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">100%</div>
                                                        </div>
                                                    </td>
                                                    <td>
                                                        <button class="btn btn-sm btn-outline-secondary"><i class="bi bi-eye"></i></button>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td>视频生成</td>
                                                    <td>全部</td>
                                                    <td class="text-warning">进行中</td>
                                                    <td>
                                                        <div class="progress">
                                                            <div class="progress-bar progress-bar-striped progress-bar-animated" 
                                                                role="progressbar" style="width: 65%" 
                                                                aria-valuenow="65" aria-valuemin="0" aria-valuemax="100">65%</div>
                                                        </div>
                                                    </td>
                                                    <td>
                                                        <button class="btn btn-sm btn-outline-secondary"><i class="bi bi-eye"></i></button>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td>视频发布</td>
                                                    <td>抖音</td>
                                                    <td class="text-secondary">等待中</td>
                                                    <td>
                                                        <div class="progress">
                                                            <div class="progress-bar" role="progressbar" style="width: 0%" 
                                                                aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">0%</div>
                                                        </div>
                                                    </td>
                                                    <td>
                                                        <button class="btn btn-sm btn-outline-secondary"><i class="bi bi-eye"></i></button>
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 热点分析内容 -->
                <div id="hotspotAnalysisContent" class="content-section">
                    <div class="row mb-4">
                        <div class="col-12">
                            <div class="card">
                                <div class="card-header d-flex justify-content-between align-items-center">
                                    <h5 class="mb-0">热点分析</h5>
                                    <button class="btn btn-primary">
                                        <i class="bi bi-arrow-repeat"></i> 刷新热点
                                    </button>
                                </div>
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-md-4 mb-3">
                                            <div class="card hotspot-card">
                                                <div class="card-header bg-light">
                                                    <div class="d-flex align-items-center">
                                                        <img src="douyin-icon.png" alt="抖音" class="hotspot-platform-icon">
                                                        <span>抖音热点</span>
                                                    </div>
                                                </div>
                                                <div class="card-body">
                                                    <div class="hotspot-item mb-3">
                                                        <h6 class="mb-1">夏日清凉饮品制作</h6>
                                                        <p class="mb-1 small text-muted">热度: 9.8万</p>
                                                        <p class="mb-0 small">分享夏日特色饮品制作方法，简单易学，清凉解暑。</p>
                                                        <div class="mt-2">
                                                            <button class="btn btn-sm btn-outline-primary">生成视频</button>
                                                            <button class="btn btn-sm btn-outline-secondary">保存</button>
                                                        </div>
                                                    </div>
                                                    <div class="hotspot-item">
                                                        <h6 class="mb-1">办公室午休小技巧</h6>
                                                        <p class="mb-1 small text-muted">热度: 7.5万</p>
                                                        <p class="mb-0 small">分享如何在繁忙工作中高效利用午休时间，提升下午工作效率。</p>
                                                        <div class="mt-2">
                                                            <button class="btn btn-sm btn-outline-primary">生成视频</button>
                                                            <button class="btn btn-sm btn-outline-secondary">保存</button>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-4 mb-3">
                                            <div class="card hotspot-card">
                                                <div class="card-header bg-light">
                                                    <div class="d-flex align-items-center">
                                                        <img src="bilibili-icon.png" alt="B站" class="hotspot-platform-icon">
                                                        <span>B站热点</span>
                                                    </div>
                                                </div>
                                                <div class="card-body">
                                                    <div class="hotspot-item mb-3">
                                                        <h6 class="mb-1">新款游戏评测</h6>
                                                        <p class="mb-1 small text-muted">热度: 12.3万</p>
                                                        <p class="mb-0 small">最新游戏详细评测，包括画面、玩法、剧情分析。</p>
                                                        <div class="mt-2">
                                                            <button class="btn btn-sm btn-outline-primary">生成视频</button>
                                                            <button class="btn btn-sm btn-outline-secondary">保存</button>
                                                        </div>
                                                    </div>
                                                    <div class="hotspot-item">
                                                        <h6 class="mb-1">编程入门教程</h6>
                                                        <p class="mb-1 small text-muted">热度: 8.6万</p>
                                                        <p class="mb-0 small">零基础编程入门，从基本概念到简单项目实战。</p>
                                                        <div class="mt-2">
                                                            <button class="btn btn-sm btn-outline-primary">生成视频</button>
                                                            <button class="btn btn-sm btn-outline-secondary">保存</button>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-4 mb-3">
                                            <div class="card hotspot-card">
                                                <div class="card-header bg-light">
                                                    <div class="d-flex align-items-center">
                                                        <img src="xiaohongshu-icon.png" alt="小红书" class="hotspot-platform-icon">
                                                        <span>小红书热点</span>
                                                    </div>
                                                </div>
                                                <div class="card-body">
                                                    <div class="hotspot-item mb-3">
                                                        <h6 class="mb-1">极简风格家居布置</h6>
                                                        <p class="mb-1 small text-muted">热度: 15.7万</p>
                                                        <p class="mb-0 small">如何用简约的设计理念打造舒适高级感家居环境。</p>
                                                        <div class="mt-2">
                                                            <button class="btn btn-sm btn-outline-primary">生成视频</button>
                                                            <button class="btn btn-sm btn-outline-secondary">保存</button>
                                                        </div>
                                                    </div>
                                                    <div class="hotspot-item">
                                                        <h6 class="mb-1">夏季护肤小技巧</h6>
                                                        <p class="mb-1 small text-muted">热度: 11.2万</p>
                                                        <p class="mb-0 small">夏季皮肤护理方法，预防晒伤和痘痘问题。</p>
                                                        <div class="mt-2">
                                                            <button class="btn btn-sm btn-outline-primary">生成视频</button>
                                                            <button class="btn btn-sm btn-outline-secondary">保存</button>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 热点历史记录内容 -->
                <div id="hotspotHistoryContent" class="content-section">
                    <div class="row mb-4">
                        <div class="col-12">
                            <div class="card">
                                <div class="card-header d-flex justify-content-between align-items-center">
                                    <h5 class="mb-0">热点历史记录</h5>
                                    <div class="btn-group">
                                        <button class="btn btn-outline-secondary active">全部</button>
                                        <button class="btn btn-outline-secondary">抖音</button>
                                        <button class="btn btn-outline-secondary">B站</button>
                                        <button class="btn btn-outline-secondary">小红书</button>
                                    </div>
                                </div>
                                <div class="card-body">
                                    <div class="table-responsive">
                                        <table class="table table-hover">
                                            <thead>
                                                <tr>
                                                    <th>日期</th>
                                                    <th>平台</th>
                                                    <th>热点标题</th>
                                                    <th>热度</th>
                                                    <th>状态</th>
                                                    <th>操作</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr>
                                                    <td>2023-06-15</td>
                                                    <td><i class="bi bi-music-note-beamed"></i> 抖音</td>
                                                    <td>夏日清凉饮品制作</td>
                                                    <td>9.8万</td>
                                                    <td><span class="badge bg-success">已使用</span></td>
                                                    <td>
                                                        <button class="btn btn-sm btn-outline-primary">查看</button>
                                                        <button class="btn btn-sm btn-outline-secondary">再次使用</button>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td>2023-06-14</td>
                                                    <td><i class="bi bi-play-btn"></i> B站</td>
                                                    <td>新款游戏评测</td>
                                                    <td>12.3万</td>
                                                    <td><span class="badge bg-success">已使用</span></td>
                                                    <td>
                                                        <button class="btn btn-sm btn-outline-primary">查看</button>
                                                        <button class="btn btn-sm btn-outline-secondary">再次使用</button>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td>2023-06-13</td>
                                                    <td><i class="bi bi-book"></i> 小红书</td>
                                                    <td>极简风格家居布置</td>
                                                    <td>15.7万</td>
                                                    <td><span class="badge bg-warning">未使用</span></td>
                                                    <td>
                                                        <button class="btn btn-sm btn-outline-primary">查看</button>
                                                        <button class="btn btn-sm btn-outline-secondary">使用</button>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td>2023-06-12</td>
                                                    <td><i class="bi bi-music-note-beamed"></i> 抖音</td>
                                                    <td>办公室午休小技巧</td>
                                                    <td>7.5万</td>
                                                    <td><span class="badge bg-warning">未使用</span></td>
                                                    <td>
                                                        <button class="btn btn-sm btn-outline-primary">查看</button>
                                                        <button class="btn btn-sm btn-outline-secondary">使用</button>
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 快捷键设置内容 -->
                <div id="shortcutSettingsContent" class="content-section">
                    <div class="row mb-4">
                        <div class="col-12">
                            <div class="card">
                                <div class="card-header">
                                    <h5 class="mb-0">快捷键设置</h5>
                                </div>
                                <div class="card-body">
                                    <div class="table-responsive">
                                        <table class="table">
                                            <thead>
                                                <tr>
                                                    <th width="30%">功能</th>
                                                    <th width="30%">当前快捷键</th>
                                                    <th width="40%">修改</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr>
                                                    <td>录制视频</td>
                                                    <td><kbd>Ctrl</kbd> + <kbd>R</kbd></td>
                                                    <td>
                                                        <div class="input-group">
                                                            <input type="text" class="form-control" value="Ctrl + R" readonly>
                                                            <button class="btn btn-outline-secondary">修改</button>
                                                        </div>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td>一键发布</td>
                                                    <td><kbd>Ctrl</kbd> + <kbd>P</kbd></td>
                                                    <td>
                                                        <div class="input-group">
                                                            <input type="text" class="form-control" value="Ctrl + P" readonly>
                                                            <button class="btn btn-outline-secondary">修改</button>
                                                        </div>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td>开始自动化</td>
                                                    <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>S</kbd></td>
                                                    <td>
                                                        <div class="input-group">
                                                            <input type="text" class="form-control" value="Ctrl + Shift + S" readonly>
                                                            <button class="btn btn-outline-secondary">修改</button>
                                                        </div>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td>停止自动化</td>
                                                    <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>X</kbd></td>
                                                    <td>
                                                        <div class="input-group">
                                                            <input type="text" class="form-control" value="Ctrl + Shift + X" readonly>
                                                            <button class="btn btn-outline-secondary">修改</button>
                                                        </div>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td>刷新热点</td>
                                                    <td><kbd>F5</kbd></td>
                                                    <td>
                                                        <div class="input-group">
                                                            <input type="text" class="form-control" value="F5" readonly>
                                                            <button class="btn btn-outline-secondary">修改</button>
                                                        </div>
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                                <div class="card-footer text-end">
                                    <button class="btn btn-secondary me-2">恢复默认</button>
                                    <button class="btn btn-primary">保存设置</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 系统设置内容 -->
                <div id="systemSettingsContent" class="content-section">
                    <div class="row mb-4">
                        <div class="col-12">
                            <div class="card">
                                <div class="card-header">
                                    <h5 class="mb-0">系统设置</h5>
                                </div>
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-md-6">
                                            <h6 class="mb-3">基本设置</h6>
                                            <div class="mb-3">
                                                <label for="defaultVideoDir" class="form-label">默认视频目录</label>
                                                <div class="input-group">
                                                    <input type="text" class="form-control" id="defaultVideoDir" value="D:\Videos\EasyShare">
                                                    <button class="btn btn-outline-secondary">浏览</button>
                                                </div>
                                            </div>
                                            <div class="mb-3">
                                                <label for="defaultVideoFormat" class="form-label">默认视频格式</label>
                                                <select class="form-select" id="defaultVideoFormat">
                                                    <option value="mp4" selected>MP4</option>
                                                    <option value="mov">MOV</option>
                                                    <option value="avi">AVI</option>
                                                </select>
                                            </div>
                                            <div class="mb-3 form-check">
                                                <input type="checkbox" class="form-check-input" id="startWithSystem" checked>
                                                <label class="form-check-label" for="startWithSystem">开机自启动</label>
                                            </div>
                                            <div class="mb-3 form-check">
                                                <input type="checkbox" class="form-check-input" id="minimizeToTray" checked>
                                                <label class="form-check-label" for="minimizeToTray">最小化到系统托盘</label>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <h6 class="mb-3">平台账号设置</h6>
                                            <div class="mb-3">
                                                <label for="douyinAccount" class="form-label">抖音账号</label>
                                                <div class="input-group">
                                                    <input type="text" class="form-control" id="douyinAccount" placeholder="抖音账号">
                                                    <button class="btn btn-outline-secondary">验证</button>
                                                </div>
                                                <div class="form-text">状态: <span class="text-success">已连接</span></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="card-footer text-end">
                                    <button class="btn btn-secondary me-2">恢复默认</button>
                                    <button class="btn btn-primary">保存设置</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 日志记录内容 -->
                <div id="logsContent" class="content-section">
                    <div class="row mb-4">
                        <div class="col-12">
                            <div class="card">
                                <div class="card-header d-flex justify-content-between align-items-center">
                                    <h5 class="mb-0">日志记录</h5>
                                    <div>
                                        <button class="btn btn-outline-secondary me-2">
                                            <i class="bi bi-download"></i> 导出日志
                                        </button>
                                        <button class="btn btn-outline-danger">
                                            <i class="bi bi-trash"></i> 清空日志
                                        </button>
                                    </div>
                                </div>
                                <div class="card-body">
                                    <div class="mb-3">
                                        <div class="btn-group">
                                            <button class="btn btn-outline-secondary active">全部</button>
                                            <button class="btn btn-outline-info">信息</button>
                                            <button class="btn btn-outline-success">成功</button>
                                            <button class="btn btn-outline-warning">警告</button>
                                            <button class="btn btn-outline-danger">错误</button>
                                        </div>
                                    </div>
                                    <div class="log-container">
                                        <div class="log-entry">
                                            <div class="d-flex justify-content-between">
                                                <span class="log-level-success"><i class="bi bi-check-circle"></i> 成功</span>
                                                <span class="log-time">2023-06-15 15:30:45</span>
                                            </div>
                                            <p class="mb-0">视频 "如何提高工作效率.mp4" 已成功发布到抖音平台。</p>
                                        </div>
                                        <div class="log-entry">
                                            <div class="d-flex justify-content-between">
                                                <span class="log-level-info"><i class="bi bi-info-circle"></i> 信息</span>
                                                <span class="log-time">2023-06-15 15:28:12</span>
                                            </div>
                                            <p class="mb-0">开始发布视频 "如何提高工作效率.mp4" 到抖音平台。</p>
                                        </div>
                                        <div class="log-entry">
                                            <div class="d-flex justify-content-between">
                                                <span class="log-level-warning"><i class="bi bi-exclamation-triangle"></i> 警告</span>
                                                <span class="log-time">2023-06-15 14:45:30</span>
                                            </div>
                                            <p class="mb-0">B站账号验证失败，请检查账号信息并重新验证。</p>
                                        </div>
                                        <div class="log-entry">
                                            <div class="d-flex justify-content-between">
                                                <span class="log-level-info"><i class="bi bi-info-circle"></i> 信息</span>
                                                <span class="log-time">2023-06-15 14:30:22</span>
                                            </div>
                                            <p class="mb-0">视频 "如何提高工作效率.mp4" 录制完成，时长 03:45。</p>
                                        </div>
                                        <div class="log-entry">
                                            <div class="d-flex justify-content-between">
                                                <span class="log-level-error"><i class="bi bi-x-circle"></i> 错误</span>
                                                <span class="log-time">2023-06-14 16:12:05</span>
                                            </div>
                                            <p class="mb-0">自动化发布过程中断，网络连接异常，请检查网络设置。</p>
                                        </div>
                                        <div class="log-entry">
                                            <div class="d-flex justify-content-between">
                                                <span class="log-level-success"><i class="bi bi-check-circle"></i> 成功</span>
                                                <span class="log-time">2023-06-14 11:05:18</span>
                                            </div>
                                            <p class="mb-0">视频 "夏日美食分享.mp4" 已成功发布到小红书平台。</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 系统托盘通知 -->
    <div class="toast-container"></div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script src="script.js"></script>
</body>
</html>
                                            <div class="mb-3">
                                                <label for="bilibiliAccount" class="form-label">B站账号</label>
                                                <div class="input-group">
                                                    <input type="text" class="form-control" id="bilibiliAccount" placeholder="B站账号">
                                                    <button class="btn btn-outline-secondary">验证</button>
                                                </div>
                                                <div class="form-text">状态: <span class="text-warning">未连接</span></div>
                                            </div>
                                            <div class="mb-3">
                                                <label for="xiaohongshuAccount" class="form-label">小红书账号</label>
                                                <div class="input-group">
                                                    <input type="text" class="form-control" id="xiaohongshuAccount" placeholder="小红书账号">
                                                    <button class="btn btn-outline-secondary">验证</button>
                                                </div>
                                                <div class="form-text">状态: <span class="text-success">已连接</span></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="card-footer text-end">
                                    <button class="btn btn-secondary me-2">恢复默认</button>
                                    <button class="btn btn-primary">保存设置</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 日志记录内容 -->
                <div id="logsContent" class="content-section">
                    <div class="row mb-4">
                        <div class="col-12">
                            <div class="card">
                                <div class="card-header d-flex justify-content-between align-items-center">
                                    <h5 class="mb-0">日志记录</h5>
                                    <div>
                                        <button class="btn btn-outline-secondary me-2">
                                            <i class="bi bi-download"></i> 导出日志
                                        </button>
                                        <button class="btn btn-outline-danger">
                                            <i class="bi bi-trash"></i> 清空日志
                                        </button>
                                    </div>
                                </div>
                                <div class="card-body">
                                    <div class="mb-3">
                                        <div class="btn-group">
                                            <button class="btn btn-outline-secondary active">全部</button>
                                            <button class="btn btn-outline-info">信息</button>
                                            <button class="btn btn-outline-success">成功</button>
                                            <button class="btn btn-outline-warning">警告</button>
                                            <button class="btn btn-outline-danger">错误</button>
                                        </div>
                                    </div>
                                    <div class="log-container">
                                        <div class="log-entry">
                                            <div class="d-flex justify-content-between">
                                                <span class="log-level-success"><i class="bi bi-check-circle"></i> 成功</span>
                                                <span class="log-time">2023-06-15 15:30:45</span>
                                            </div>
                                            <p class="mb-0">视频 "如何提高工作效率.mp4" 已成功发布到抖音平台。</p>
                                        </div>
                                        <div class="log-entry">
                                            <div class="d-flex justify-content-between">
                                                <span class="log-level-info"><i class="bi bi-info-circle"></i> 信息</span>
                                                <span class="log-time">2023-06-15 15:28:12</span>
                                            </div>
                                            <p class="mb-0">开始发布视频 "如何提高工作效率.mp4" 到抖音平台。</p>
                                        </div>
                                        <div class="log-entry">
                                            <div class="d-flex justify-content-between">
                                                <span class="log-level-warning"><i class="bi bi-exclamation-triangle"></i> 警告</span>
                                                <span class="log-time">2023-06-15 14:45:30</span>
                                            </div>
                                            <p class="mb-0">B站账号验证失败，请检查账号信息并重新验证。</p>
                                        </div>
                                        <div class="log-entry">
                                            <div class="d-flex justify-content-between">
                                                <span class="log-level-info"><i class="bi bi-info-circle"></i> 信息</span>
                                                <span class="log-time">2023-06-15 14:30:22</span>
                                            </div>
                                            <p class="mb-0">视频 "如何提高工作效率.mp4" 录制完成，时长 03:45。</p>
                                        </div>
                                        <div class="log-entry">
                                            <div class="d-flex justify-content-between">
                                                <span class="log-level-error"><i class="bi bi-x-circle"></i> 错误</span>
                                                <span class="log-time">2023-06-14 16:12:05</span>
                                            </div>
                                            <p class="mb-0">自动化发布过程中断，网络连接异常，请检查网络设置。</p>
                                        </div>
                                        <div class="log-entry">
                                            <div class="d-flex justify-content-between">
                                                <span class="log-level-success"><i class="bi bi-check-circle"></i> 成功</span>
                                                <span class="log-time">2023-06-14 11:05:18</span>
                                            </div>
                                            <p class="mb-0">视频 "夏日美食分享.mp4" 已成功发布到小红书平台。</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 系统托盘通知 -->
    <div class="toast-container"></div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script src="script.js"></script>
</body>
</html>